import React from 'react';
import { Card, Button, Table, Space, Input, Modal, Form, Select } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

const { Option } = Select;
const { Search } = Input;

// 模拟角色数据
interface RoleRecord {
  key: string;
  name: string;
  description: string;
  permissions: string;
  createTime: string;
}

const roleData: RoleRecord[] = [
  { key: '1', name: '超级管理员', description: '系统最高权限', permissions: '全部权限', createTime: '2023-01-15' },
  { key: '2', name: '管理员', description: '系统管理权限', permissions: '管理权限', createTime: '2023-01-15' },
  { key: '3', name: '编辑', description: '内容编辑权限', permissions: '编辑权限', createTime: '2023-01-15' },
  { key: '4', name: '普通用户', description: '基础操作权限', permissions: '基础权限', createTime: '2023-01-15' },
  { key: '5', name: '访客', description: '只读访问权限', permissions: '只读权限', createTime: '2023-05-15' },
];

const RoleManagement: React.FC = () => {
  // 模态框状态
  const [modalVisible, setModalVisible] = React.useState(false);
  const [currentRole, setCurrentRole] = React.useState<RoleRecord | null>(null);
  
  // 表单实例
  const [form] = Form.useForm();

  // 角色表格列
  const columns: ColumnsType<RoleRecord> = [
    { title: '角色名称', dataIndex: 'name', key: 'name' },
    { title: '角色描述', dataIndex: 'description', key: 'description' },
    { title: '权限范围', dataIndex: 'permissions', key: 'permissions' },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
    { 
      title: '操作', 
      key: 'action', 
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
          <Button type="link" danger icon={<DeleteOutlined />} disabled={record.name === '超级管理员'}>删除</Button>
        </Space>
      ),
    },
  ];

  // 处理编辑角色
  const handleEdit = (record: RoleRecord) => {
    setCurrentRole(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  // 处理添加角色
  const handleAdd = () => {
    setCurrentRole(null);
    form.resetFields();
    setModalVisible(true);
  };

  // 处理搜索
  const handleSearch = (value: string) => {
    console.log('搜索角色:', value);
    // 实际应用中这里会过滤数据
  };

  return (
    <div>
      <h1 style={{ marginBottom: '24px' }}>角色管理</h1>
      <Card variant="outlined" extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>添加角色</Button>}>
        <Search
          placeholder="搜索角色"
          allowClear
          style={{ marginBottom: 16, width: 240 }}
          prefix={<SearchOutlined />}
          onSearch={handleSearch}
        />
        <Table 
          columns={columns} 
          dataSource={roleData} 
          pagination={{ pageSize: 10 }}
          rowKey="key"
        />
      </Card>
      
      {/* 角色编辑/添加模态框 */}
      <Modal
        title={currentRole ? "编辑角色" : "添加角色"}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={(values) => {
            console.log('角色表单数据:', values);
            setModalVisible(false);
          }}
        >
          <Form.Item name="name" label="角色名称" rules={[{ required: true, message: '请输入角色名称' }]}>
            <Input placeholder="请输入角色名称" />
          </Form.Item>
          <Form.Item name="description" label="角色描述" rules={[{ required: true, message: '请输入角色描述' }]}>
            <Input.TextArea placeholder="请输入角色描述" />
          </Form.Item>
          <Form.Item name="permissions" label="权限范围" rules={[{ required: true, message: '请选择权限范围' }]}>
            <Select placeholder="请选择权限范围">
              <Option value="全部权限">全部权限</Option>
              <Option value="管理权限">管理权限</Option>
              <Option value="编辑权限">编辑权限</Option>
              <Option value="基础权限">基础权限</Option>
              <Option value="只读权限">只读权限</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Space style={{ float: 'right' }}>
              <Button onClick={() => setModalVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit">确定</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default RoleManagement;